<template>
	<view>
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30" @click="toEdit">
			<view class="u-m-r-10" style="padding-top: 40rpx;">
				<u-avatar :src="tempMyConfig.img" size="140" style="border:3px solid #18b566"></u-avatar>
			</view>
			<view class="u-flex-1" style="padding: 35rpx 0 0 50rpx">
				<view style="font-size: 45rpx; color: #18b566; font-weight: bold;">{{tempMyConfig.userName}}</view>
				<view v-show="tempMyConfig.userName === '游客模式'" class="u-font-14 u-tips-color">点击此处登录</view>
			</view>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="star" title="分享" @click="qrCode"></u-cell-item>
			</u-cell-group>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="heart" title="关联家人" @click="toConn"></u-cell-item>
			</u-cell-group>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="setting" title="设置"  @click="showChangeUrl = true" ></u-cell-item>
				<u-cell-item icon="reload" title="同步数据" @click="sync"></u-cell-item>
			</u-cell-group>
		</view>
<!-- 		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="twitter-circle-fill" title="升级app"  @click="update"></u-cell-item>
			</u-cell-group>
		</view> -->
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="github-circle-fill" title="退出登录"  @click="showLogOut = true" style="color: #ff0000;"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="copyright1">v1.0.5</view>
		<view class="copyright2">CopyRight @2021 小账本</view>
		<!-- 自定义tabbar -->
		<xm-tabbar></xm-tabbar>
		<!-- 弹出框修改同步地址 -->
		<u-popup v-model="showChangeUrl" mode="bottom">
			<view style="padding: 30rpx 30rpx 10rpx 30rpx;">
				<u-alert-tips type="warning" :show-icon='true' description="修改设置后请重启app"></u-alert-tips>
			</view>
			<u-form style="padding: 30rpx 30rpx 10rpx 30rpx;" label-width="160rpx">
				<u-form-item label="显示总额"><u-switch slot="right" v-model="tempMyConfig.showTotal"></u-switch></u-form-item>
				<!-- <u-form-item label="自动升级"><u-switch slot="right" v-model="tempMyConfig.autoUpdate"></u-switch></u-form-item> -->
				<u-form-item label="同步地址"><u-input v-model="tempMyConfig.baseUrl" /></u-form-item>
			</u-form>
			<u-row gutter="16" style="padding: 10rpx 10rpx 60rpx 10rpx;" >
				<u-col span="2">
					<span>&nbsp;</span>
				</u-col>
				<u-col span="3">
					<u-button type="info" size="medium" @click="showChangeUrl = false">取消</u-button>
				</u-col>
				<u-col span="2">
					<span>&nbsp;</span>
				</u-col>
				<u-col span="3">
					<u-button type="primary" size="medium" @click="saveUrl">保存</u-button>
				</u-col>
				<u-col span="2">
					<span>&nbsp;</span>
				</u-col>
			</u-row>
		</u-popup>
		<!-- 弹出框退出登录 -->
		<u-popup v-model="showLogOut" mode="bottom">
			<view style="padding: 30rpx 30rpx 10rpx 30rpx;">
				<u-alert-tips type="warning" :show-icon='true' description="确定要退出当前账号吗？"></u-alert-tips>
			</view>
			<u-row gutter="16" style="padding: 10rpx 10rpx 60rpx 10rpx;" >
				<u-col span="2">
					<span>&nbsp;</span>
				</u-col>
				<u-col span="3">
					<u-button type="info" size="medium" @click="showLogOut = false">取消</u-button>
				</u-col>
				<u-col span="2">
					<span>&nbsp;</span>
				</u-col>
				<u-col span="3">
					<u-button type="error" size="medium" @click="logout">退出</u-button>
				</u-col>
				<u-col span="2">
					<span>&nbsp;</span>
				</u-col>
			</u-row>
		</u-popup>
		<!-- 弹出框退出登录 -->
		<u-popup v-model="showQrCode" mode="bottom">
			<view style="padding: 30rpx 30rpx 10rpx 30rpx;">
				<u-alert-tips type="success" :show-icon='true' description="扫下方二维码即可下载app哦 ^_^"></u-alert-tips>
			</view>
			<view class="component">
				<uni-qrcode cid="qrcode2307" :text="text" foregroundColor="#2b9939" logo="/static/img/share.png" makeOnLoad/>
			</view>
		</u-popup>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js'
	import UniQrcode from '@/components/uni-qrcode/uni-qrcode'
	export default {
		data() {
			return {
				pic:'https://uviewui.com/common/logo.png',
				show:true,
				showChangeUrl: false,
				showLogOut: false,
				showQrCode: false,
				tempMyConfig:{
					"baseUrl": "",
					"autoUpdate":true,
					"showTotal": true,
					"userId": "",
					"userName": "点击登录",
					"img": "",
					"phone": "",
					"passWord": "",
				},
				text: "",
				version: "",
				url: "",
			}
		},
		onShow(){
			this.tempMyConfig.baseUrl = this.myConfig.baseUrl;
			this.tempMyConfig.version = this.myConfig.version;
			this.tempMyConfig.autoUpdate = this.myConfig.autoUpdate;
			this.tempMyConfig.showTotal = this.myConfig.showTotal;
			this.tempMyConfig.userId = this.myConfig.userId;
			this.tempMyConfig.userName = this.myConfig.userName;
			this.tempMyConfig.img = this.myConfig.img;
			this.tempMyConfig.phone = this.myConfig.phone;
			// this.tempMyConfig.passWord = this.myConfig.passWord;
			this.version = "";
			this.url = "";

		},
		methods: {
			// 修改地址
			saveUrl(){
				this.$u.vuex('myConfig.baseUrl', this.tempMyConfig.baseUrl);
				this.$u.vuex('myConfig.autoUpdate', this.tempMyConfig.autoUpdate);
				this.$u.vuex('myConfig.showTotal', this.tempMyConfig.showTotal);
				this.showChangeUrl = false;
			},
			// 同步数据
			sync(){
				if(this.tempMyConfig.userId === null 
					|| this.tempMyConfig.userId === undefined
					|| this.tempMyConfig.userId === ""){
						this.$refs.uToast.show({title: "登录后再同步", type: 'error',});
						return;
					}
				this.$refs.uToast.show({title: "同步中.....", type: 'success',});
				// 同步关联
				this.$u.post('/ledger/memberconn/sync', {
						userId: this.tempMyConfig.userId
					}).then(data => {
						if (data && data.code === 0) {
							this.$u.vuex('connList', data.connList);
						} 
					});
				// 同步记录
				this.$u.post('/ledger/record/sync', {
						userId: this.tempMyConfig.userId,
						log: JSON.stringify(this.recordList)
					}).then(data => {
						if (data && data.code === 0) {
							this.$u.vuex('recordList', data.recordList);
							this.$refs.uToast.show({title: "完成同步", type: 'success',});
						} else {
							this.$refs.uToast.show({title: data.msg, type: 'error',});
						}
					});
			},
			// 跳转到编辑用户页面
			toEdit(){
				if(this.tempMyConfig.userId === null 
					|| this.tempMyConfig.userId === undefined
					|| this.tempMyConfig.userId === ""){
					this.$u.route({
						url : '/pages/my/login',
					})	
				}else{
					this.$u.route({
						url : '/pages/my/edit-user',
					})
				}
			},
			// 跳转到关联用户页面
			toConn(){
				if(this.tempMyConfig.userId === null 
					|| this.tempMyConfig.userId === undefined
					|| this.tempMyConfig.userId === ""){
					this.$refs.uToast.show({title: "登录后再关联家人", type: 'error',});
					return;
				}
				this.$u.route({
					url : '/pages/my/conn',
				})
			},
			// 退出登录
			logout(){
				this.tempMyConfig.userId = "";
				this.tempMyConfig.userName = "游客模式";
				this.tempMyConfig.img = "";
				this.tempMyConfig.phone = "";
				this.$u.vuex('myConfig.userId', this.tempMyConfig.userId);
				this.$u.vuex('myConfig.userName', this.tempMyConfig.userName);
				this.$u.vuex('myConfig.img', this.tempMyConfig.img);
				this.$u.vuex('myConfig.phone', this.tempMyConfig.phone);
				this.$u.vuex('recordList', []);
				this.showLogOut = false;
			},
			// 展示二维码
			qrCode(){
				this.showQrCode = true;
				this.$u.get('/sys/config/info/2', {})
				.then(data => {
					if (data && data.code === 0) {
						this.text = data.config.paramValue;
					} else {
						this.$refs.uToast.show({title: data.msg, type: 'error',});
					}
				});	
			},
			// 校验更新
			update(){
				this.$u.get('/sys/config/info/2', {})
				.then(data => {
					if (data && data.code === 0) {
						this.url = data.config.paramValue;
						this.version = data.config.remark;
						if(this.version !== ""
							&&this.myConfig.version !== this.version){
							console.log(this.url)
							console.log(this.version)
							uni.downloadFile({
									url: this.url,//下载地址接口返回
									success: (data) => {
										console.log(data.statusCode)
										if (data.statusCode === 200) {
											//文件保存到本地
											uni.saveFile({
												tempFilePath: data.tempFilePath, //临时路径
												success: function(res) {
													this.$refs.uToast.show({title: "文件下载到：" + res.savedFilePath, type: 'success',});
													console.log(res.savedFilePath)
													setTimeout(() => {
														//打开文档查看
														uni.openDocument({
															filePath: res.savedFilePath,
															success: function(res) {
															}
														});
													}, 3000)
												}
											});
										}
									},
									fail: (err) => {
										this.$refs.uToast.show({title: "失败请重新下载", type: 'error',});
									},
								});
							
						}else{
							this.$refs.uToast.show({title: "当前已经是最新版本", type: 'success',});
						}
					} else {
						this.$refs.uToast.show({title: data.msg, type: 'error',});
						return;
					}
				});	

			}

		}
	}
</script>

<style lang="scss">
page{
	background-color: #ededed;
}

.user-box{
	background-color: #fff;
}
.component {
	display: flex;
	justify-content: center;
	padding: 50rpx 10rpx 50rpx 10rpx;
}
.copyright1{
	padding: 150rpx 10rpx 5rpx 10rpx;
	text-align: center;
}
.copyright2{
	padding: 5rpx 10rpx 50rpx 10rpx;
	text-align: center;
}
</style>
